<template>
  <pro-page>
    <pro-card title="默认尺寸" tooltip="这是提示" style="max-width: 300px;">
      <template #extra>extra</template>
      <div>Card content</div>
      <div>Card content</div>
      <div>Card content</div>
    </pro-card>

    <pro-card title="小尺寸卡片" style="max-width: 300px; margin-top: 16px" size="small">
      <template #extra>extra</template>
      <div>Card content</div>
      <div>Card content</div>
      <div>Card content</div>
    </pro-card>

    <pro-card style="margin-top: 16px" :gutter="8">
      <pro-card title="加载" loading bordered>
        <div>Card content</div>
        <div>Card content</div>
        <div>Card content</div>
      </pro-card>

      <pro-card title="自定义加载" loading bordered>
        <template #loading>
          <div style="text-align: center; padding: 30px 50px;"><a-spin size="large" /></div>
        </template>
      </pro-card>
    </pro-card>

    <pro-card direction="column" style="margin-top: 16px" ghost :gutter="[0, 8]">
      <pro-card layout="center" bordered>
        col-span - 24
      </pro-card>
      <pro-card :col-span="12" layout="center" bordered>
        col-span - 12
      </pro-card>
      <pro-card :col-span="8" layout="center" bordered>
        col-span - 8
      </pro-card>
      <pro-card :col-span="0" layout="center" bordered>
        col-span - 0
      </pro-card>
    </pro-card>

    <pro-card :gutter="8" title="24栅格" style="margin-top: 16px">
      <pro-card :col-span="12" layout="center" bordered>
        col-span-12
      </pro-card>
      <pro-card :col-span="6" layout="center" bordered>
        col-span-6
      </pro-card>
      <pro-card :col-span="6" layout="center" bordered>
        col-span-6
      </pro-card>
    </pro-card>

    <pro-card :gutter="8" ghost style="margin-top: 16px">
      <pro-card col-span="200px" layout="center" bordered>
        col-span - 200px
      </pro-card>
      <pro-card layout="center" bordered>
        Auto
      </pro-card>
    </pro-card>

    <pro-card style="margin-top: 16px" :gutter="8" ghost>
      <pro-card bordered layout="center">
        Auto
      </pro-card>
      <pro-card col-span="30%" bordered>
        col-span - 30%
      </pro-card>
    </pro-card>

    <pro-card style="margin-top: 16px" :gutter="8" title="24栅格">
      <pro-card :col-span="{ xs: 2, sm: 4, md: 6, lg: 8, xl: 10 }" layout="center" bordered>
        Col
      </pro-card>
      <pro-card :col-span="{ xs: 20, sm: 16, md: 12, lg: 8, xl: 4 }" layout="center" bordered>
        Col
      </pro-card>
      <pro-card :col-span="{ xs: 2, sm: 4, md: 6, lg: 8, xl: 10 }" layout="center" bordered>
        Col
      </pro-card>
    </pro-card>

    <pro-card style="margin-top: 16px" :gutter="8" title="指定宽度px">
      <pro-card
        :col-span="{
          xs: '50px',
          sm: '100px',
          md: '200px',
          lg: '300px',
          xl: '400px'
        }"
        layout="center"
        bordered>
        Col
      </pro-card>
      <pro-card layout="center" bordered>
        Auto
      </pro-card>
    </pro-card>

    <pro-card style="margin-top: 16px" :gutter="8" title="指定宽度百分比">
      <pro-card layout="center" bordered>
        Auto
      </pro-card>
      <pro-card
        layout="center"
        :col-span="{
          xs: '10%',
          sm: '20%',
          md: '30%',
          lg: '40%',
          xl: '50%'
        }"
        bordered>
        Col - 百分比
      </pro-card>
    </pro-card>

    <pro-card title="左右分栏带标题" split="vertical" bordered header-bordered style="margin-top: 16px">
      <template #extra>2019年9月28日</template>
      <pro-card title="左侧详情" col-span="50%">
        <div style="height: 360px">左侧内容</div>
      </pro-card>
      <pro-card title="流量占用情况">
        <div style="height: 360px">右侧内容</div>
      </pro-card>
    </pro-card>

    <pro-card split="vertical" style="margin-top: 16px">
      <pro-card title="左侧详情" col-span="30%">
        左侧内容
      </pro-card>
      <pro-card title="左右分栏子卡片带标题" header-bordered>
        <div style="height: 360px">右侧内容</div>
      </pro-card>
    </pro-card>

    <pro-card title="复杂切分" extra="2019年9月28日" bordered header-bordered split="vertical" style="margin-top: 16px">
      <pro-card split="horizontal">
        <pro-card split="horizontal">
          <pro-card split="vertical">
            <pro-card title="昨日全部流量">123</pro-card>
            <pro-card title="本月累计流量">234</pro-card>
            <pro-card title="今年累计流量">345</pro-card>
          </pro-card>
          <pro-card split="vertical">
            <pro-card title="运行中试验">12/56</pro-card>
            <pro-card title="历史试验总数">134 个</pro-card>
          </pro-card>
        </pro-card>
        <pro-card title="流量趋势">
          <div>图表</div>
          <div>图表</div>
          <div>图表</div>
          <div>图表</div>
          <div>图表</div>
        </pro-card>
      </pro-card>
      <pro-card title="流量占用情况">右侧内容</pro-card>
    </pro-card>

    <pro-card style="margin-top: 16px" :gutter="[8, 8]" wrap title="换行">
      <pro-card :col-span="{ xs: 24, sm: 12, md: 12, lg: 12, xl: 12 }" layout="center" bordered>
        Col
      </pro-card>
      <pro-card :col-span="{ xs: 24, sm: 12, md: 12, lg: 12, xl: 12 }" layout="center" bordered>
        Col
      </pro-card>
      <pro-card :col-span="{ xs: 24, sm: 12, md: 12, lg: 12, xl: 12 }" layout="center" bordered>
        Col
      </pro-card>
      <pro-card :col-span="{ xs: 24, sm: 12, md: 12, lg: 12, xl: 12 }" layout="center" bordered>
        Col
      </pro-card>
    </pro-card>

    <pro-card title="可折叠" header-bordered collapsible :default-collapsed="false" @collapse="handleCollapse" style="margin-top: 16px">
      内容
    </pro-card>

    <pro-card title="可折叠-受控自定义" style="margin-top: 16px" header-bordered :collapsed.sync="collapsed" @collaspe="handleCollapse2">
      <a-icon slot="extra" type="right" :rotate="!collapsed ? 90 : undefined" class="pro-card-collapsible-icon" @click="handleClick" />
      内容
    </pro-card>

    <pro-card title="卡片组展开" ghost :gutter="8" collapsible default-collapsed style="margin-top: 16px">
      <pro-card layout="center" bordered>
        卡片内容
      </pro-card>
      <pro-card layout="center" bordered>
        卡片内容
      </pro-card>
      <pro-card layout="center" bordered>
        卡片内容
      </pro-card>
    </pro-card>

    <pro-card style="max-width: 300px;margin-top: 16px;">
      <template slot="actions">
        <a-icon key="setting" type="setting" />
        <a-icon key="edit" type="edit" />
        <a-icon key="ellipsis" type="ellipsis" />
      </template>
      <div>123</div>
      <div>123</div>
    </pro-card>

    <pro-card title="悬浮效果" tooltip="这是提示" style="margin-top: 16px;max-width: 300px;" bordered hoverable>
      内容
    </pro-card>

    <pro-card-group style="margin-top: 16px">
      <pro-card title="left" header-bordered>111</pro-card>
      <pro-card title="right" header-bordered>111</pro-card>
    </pro-card-group>

    <div style="margin-top: 16px">
      <a-select v-model="tabsProps.props.tabPosition" :dropdown-match-select-width="false">
        <a-select-option value="top">top</a-select-option>
        <a-select-option value="right">right</a-select-option>
        <a-select-option value="bottom">bottom</a-select-option>
        <a-select-option value="left">left</a-select-option>
      </a-select>

      <a-select v-model="tabsProps.props.type" :dropdown-match-select-width="false" style="margin-left: 8px;">
        <a-select-option value="line">line</a-select-option>
        <a-select-option value="card">card</a-select-option>
      </a-select>
    </div>

    <pro-card :tabs="tabsProps" style="margin-top: 16px">
      <pro-card-tab-pane key="tab1">
        <span slot="tab">
          产品一
        </span>
        内容一
      </pro-card-tab-pane>
      <pro-card-tab-pane key="tab2" tab="产品二">
        内容二
      </pro-card-tab-pane>
    </pro-card>

    <pro-card style="margin-top: 16px">
      <template #tabs>
        <pro-card-tabs v-model="tabsProps.props.activeKey" :tab-position="tabsProps.props.tabPosition" :type="tabsProps.props.type">
          <pro-card-tab-pane key="tab1">
            <span slot="tab">产品一</span>
            内容一
          </pro-card-tab-pane>
          <pro-card-tab-pane key="tab2" tab="产品二">
            <span slot="tab">
              <a-icon type="apple" />Tab 2
            </span>
            内容二
          </pro-card-tab-pane>
        </pro-card-tabs>
      </template>
    </pro-card>

    <pro-card title="横向内部卡片" bordered header-bordered :gutter="16" style="margin-top: 16px">
      <pro-card title="内部卡片标题" type="inner" bordered>
        内部卡片内容
      </pro-card>
      <pro-card title="内部卡片标题" type="inner" bordered>
        内部卡片内容
      </pro-card>
    </pro-card>
  </pro-page>
</template>

<script>
export default {
  name: 'DemoProCard',
  data() {
    return {
      tab: 'tab1',
      collapsed: true,
      tabsProps: {
        props: {
          type: 'line',
          tabPosition: 'top',
          activeKey: 'tab1'
        },
        on: {
          change: this.handleTabsChange
        }
      }
    }
  },
  methods: {
    handleCollapse(collapsed) {
      // eslint-disable-next-line no-console
      console.log(collapsed)
    },
    handleClick() {
      this.collapsed = !this.collapsed
    },
    handleCollapse2(collapsed) {
      this.collapsed = collapsed
    },
    handleTabsChange(activeKey) {
      this.tabsProps.props.activeKey = activeKey
    }
  }
}
</script>
